import React, { useState, useEffect } from "react";
import { Tabs, Button, Typography } from "antd";
import styles from "./SpaceList.module.less";
import Icon from "../../utils/icons";
import SpaceSidebar from "./components/SpaceSidebar.js";

const { TabPane } = Tabs;
const { Title, Paragraph } = Typography;

// 未开发功能的提示组件
const UnderDevelopment = ({ title }: any) => (
  <div className={styles.underDevelopmentContainer}>
    <div className={styles.developmentNotice}>
      <div className={styles.noticeIcon}>🚧</div>
      <h2>{title}</h2>
      <p className={styles.noticeMessage}>此功能暂未开发</p>
      <div className={styles.noticeDetails}>
        <p>{title}功能正在开发中，敬请期待！</p>
      </div>
    </div>
  </div>
);

// 没有应用页面组件
const EmptyAppList = () => (
  <div className={styles.emptyAppContainer}>
    <div className={styles.emptyAppContent}>
      <Icon name={"NoApp"} className={styles.emptyAppImage} />
      <div className={styles.emptyAppText}>还没有应用</div>
    </div>
  </div>
);

// Tab标签自定义组件
const CustomTab = ({ iconName, label }: any) => (
  <div className={styles.customTab}>
    <Icon name={iconName} className={styles.tabIcon} />
    <span>{label}</span>
  </div>
);

// 空间内容组件
const SpaceContent = ({ spaceId, spaceName }: any) => {
  const handleCreateApp = () => {
    console.log("创建应用", spaceId);
  };

  // 自定义Tab栏的额外操作
  const tabBarExtraContent = (
    <Button
      type="primary"
      className={styles.createAppButton}
      onClick={handleCreateApp}
    >
      + 创建应用
    </Button>
  );

  return (
    <div className={styles.spaceContentArea}>
      <div className={styles.spaceHeader}>
        <Title level={4}>{spaceName}</Title>
      </div>

      <div className={styles.tabsContainer}>
        <Tabs
          defaultActiveKey="app-dev"
          tabBarGutter={24}
          tabBarExtraContent={tabBarExtraContent}
        >
          <TabPane
            tab={<CustomTab iconName="Appdev" label="应用开发" />}
            key="app-dev"
          >
            <EmptyAppList />
          </TabPane>

          <TabPane
            tab={<CustomTab iconName="Database" label="资源库" />}
            key="resources"
          >
            <UnderDevelopment title="资源库" />
          </TabPane>

          <TabPane
            tab={<CustomTab iconName="Publish" label="发布管理" />}
            key="publish"
          >
            <UnderDevelopment title="发布管理" />
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
};

const SpaceList: React.FC = () => {
  const [selectedSpaceId, setSelectedSpaceId] = useState("personal-space");
  const [selectedSpaceName, setSelectedSpaceName] = useState("个人空间");

  const handleSelectSpace = (spaceId: any, name: any) => {
    setSelectedSpaceId(spaceId);
    setSelectedSpaceName(name);
    console.log(`选择空间: ${spaceId}, 名称: ${name}`);
  };

  return (
    <div style={{ padding: "24px" }}>
      <div className={styles.pageContainer}>
        <SpaceSidebar
          onSelectSpace={handleSelectSpace}
          selectedSpaceId={selectedSpaceId}
        />
        <div className={styles.contentContainer}>
          <SpaceContent
            spaceId={selectedSpaceId}
            spaceName={selectedSpaceName}
          />
        </div>
      </div>
    </div>
  );
};

export default SpaceList;
